<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author ThinkGem
-->
<template>
  <BasicDrawer v-bind="$attrs" :showFooter="false" @register="registerDrawer" width="80%">
    <template #title>
      <Icon :icon="getTitle.icon" class="pr-1 m-1" />
      <span> {{ getTitle.value }} </span>
      <!-- <span> （{{ record.code + '-' + record.name + '-' + record.typeName }}） </span> -->
    </template>
    <Tabs v-model:activeKey="activeKey" tabPosition="left" @tabClick="tabsClick">
      <Tabs.TabPane key="1" :forceRender="true" tab="备货中">
        <TabList1 v-if="flag" :selIds="selIds" ref="list1"/>
      </Tabs.TabPane>

      <Tabs.TabPane key="2" :forceRender="true" tab="未拣货">
        <TabList2 v-if="flag" :selIds="selIds" ref="list2"/>
      </Tabs.TabPane>

      <Tabs.TabPane key="3" :forceRender="true" tab="已拣货">
        <TabList3 v-if="flag" :selIds="selIds" ref="list3"/>
      </Tabs.TabPane>

      <Tabs.TabPane key="4" :forceRender="true" tab="已出库">
        <TabList4 v-if="flag" :selIds="selIds" ref="list4"/>
      </Tabs.TabPane>

      <Tabs.TabPane key="5" :forceRender="true" tab="已推送">
        <TabList5 v-if="flag" :selIds="selIds" ref="list5"/>
      </Tabs.TabPane>
      
    </Tabs>
  </BasicDrawer>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsTestTestDataForm',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref, computed } from 'vue';
  import { Tabs } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  // import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';

  import TabList1 from './list1.vue';
  import TabList2 from './list2.vue';
  import TabList3 from './list3.vue';
  import TabList4 from './list4.vue';
  import TabList5 from './list5.vue';

  let list1 = ref<any>(null);
  let list2 = ref<any>(null);
  let list3 = ref<any>(null);
  let list4 = ref<any>(null);
  let list5 = ref<any>(null);

  // const emit = defineEmits(['success', 'register']);
  let selIds = ref({});
  const { t } = useI18n('test.testData');
  // const { showMessage } = useMessage();
  const getTitle = computed(() => ({
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: t('退货'),
  }));
  let record = ref({
    code: '',
    name: '',
    typeName: '',
    typeCode: '',
  });
  let flag = ref(false);
  const activeKey = ref<string>('1');
  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    flag.value = false;
    activeKey.value = '1';
    selIds.value = data.selIds;
    flag.value = true;
    await setDrawerProps({ loading: true });
    list1.value.handleSuccess();
    setDrawerProps({ loading: false });
  });

  function tabsClick(e) {
    if (e == 1) {
      list1.value.handleSuccess();
    } else if (e == 2) {
      list2.value.handleSuccess();
    } else if (e == 3) {
      list3.value.handleSuccess();
    } else if (e == 4) {
      list4.value.handleSuccess();
    } else if (e == 5) {
      list5.value.handleSuccess();
    }
  }

  // async function handleSubmit() {
  //   try {
  //     const data = await validate();
  //     setDrawerProps({ confirmLoading: true });
  //     const params: any = {
  //       isNewRecord: record.value.isNewRecord,
  //       id: record.value.id,
  //     };
  //     data.testDataChildList = await getTestDataChildList();
  //     // console.log('submit', params, data, record);
  //     const res = await testDataSave(params, data);
  //     showMessage(res.message);
  //     setTimeout(closeDrawer);
  //     emit('success', data);
  //   } catch (error: any) {
  //     if (error && error.errorFields) {
  //       showMessage(t('您填写的信息有误，请根据提示修正。'));
  //     }
  //     console.log('error', error);
  //   } finally {
  //     setDrawerProps({ confirmLoading: false });
  //   }
  // }
</script>
<style scoped>
  /deep/ .ant-tabs-nav-operations{
    display: none !important;
  }
</style>
